<template>
  <div>
    <el-container>
      <el-header>注册账户</el-header>
      <el-main class="el-main">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          label-position="top"
          size="small"
        >
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="用户名" prop="username">
                <el-input
                  v-model="ruleForm.username"
                  placeholder="UserName"
                  maxlength="15"
                  style="width: 230px"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="ruleForm.password"
                  placeholder="PassWord"
                  show-password
                  maxlength="15"
                  style="width: 230px"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input
                  v-model="ruleForm.confirmPassword"
                  placeholder="Confirm Password"
                  show-password
                  maxlength="15"
                  style="width: 230px"
                ></el-input>
              </el-form-item>
              <el-form-item label="角色" prop="role">
                <el-select
                  v-model="ruleForm.role"
                  placeholder="Nothing selected"
                  style="width: 230px"
                >
                  <el-option
                    v-for="item in optionsRole"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="中心" prop="site">
                <el-select
                  v-model="ruleForm.site"
                  filterable
                  placeholder="Nothing selected"
                  style="width: 230px"
                >
                  <el-option
                    v-for="item in optionsSite"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="账户状态">
                <el-alert
                  type="info"
                  :closable="false"
                  style="background-color: #e9eef3"
                  >{{ accountStatus }}</el-alert
                >
              </el-form-item>
            </el-col>
            <el-col :span="14" :offset="2">
              <el-form-item label="前缀" prop="prefix">
                <el-select
                  v-model="ruleForm.prefix"
                  placeholder="Nothing selected"
                  style="width: 350px"
                >
                  <el-option
                    v-for="item in optionsPrefix"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="姓" prop="surname">
                <el-input
                  v-model="ruleForm.surname"
                  placeholder="LastName"
                  maxlength="15"
                  style="width: 350px"
                ></el-input>
              </el-form-item>
              <el-form-item label="名" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  placeholder="FirstName"
                  maxlength="15"
                  style="width: 350px"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model="ruleForm.email"
                  placeholder="Email"
                  maxlength="25"
                  style="width: 350px"
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="telephone">
                <el-input
                  v-model="ruleForm.telephone"
                  placeholder="Telephone"
                  maxlength="15"
                  style="width: 350px"
                ></el-input>
              </el-form-item>
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-form-item label="验证码" prop="verificationCode">
                    <el-input
                      v-model="ruleForm.verificationCode"
                      placeholder="Vericode"
                      style="width: 180px"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-button size="small" type="primary" class="vericode_btn"
                    >获取验证码</el-button
                  >
                </el-col>
              </el-row>
              <el-form-item>
                <el-row class="row-btn" type="flex" justify="end">
                  <el-col :span="6">
                    <el-button
                      size="small"
                      type="primary"
                      @click="submitForm('ruleForm')"
                      >注册</el-button
                    >
                  </el-col>
                  <el-col :span="6">
                    <el-button
                      size="small"
                      type="primary"
                      @click="resetForm('ruleForm')"
                      >重置</el-button
                    >
                  </el-col>
                  <el-col :span="6">
                    <el-button size="small" type="primary" @click="back"
                      >返回</el-button
                    >
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    // 校验密码的规则
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    // 校验确认密码的规则
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    // 验证邮箱的规则
    let checkEmail = (rule, value, cb) => {
      //验证邮箱的正则表达式
      const regEmail =
        /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      if (regEmail.test(value)) {
        //合法的邮箱
        return cb();
      } else {
        cb(new Error("请输入合法的邮箱"));
      }
    };
    //验证的手机号规则
    let checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (regMobile.test(value)) {
        //合法的手机号
        return cb();
      } else {
        cb(new Error("请输入合法的手机号"));
      }
    };

    return {
      // 登录表单的数据绑定对象
      ruleForm: {
        username: "",
        password: "",
        confirmPassword: "",
        role: "",
        site: "",
        accountStatus: "",
        prefix: "",
        surname: "",
        name: "",
        email: "",
        telephone: "",
        verificationCode: "",
      },
      // 表单的校验规则
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        role: [{ required: true, message: "请选择角色", trigger: "change" }],
        site: [{ required: true, message: "请选择中心", trigger: "blur" }],
        // accountStatus: [
        //   { required: true, message: "请输入活动名称", trigger: "blur" },
        //   {
        //     min: 10,
        //     max: 15,
        //     message: "长度在 10 到 15 个字符",
        //     trigger: "blur",
        //   },
        // ],
        prefix: [{ required: true, message: "请选择前缀", trigger: "blur" }],
        surname: [{ required: true, message: "请输入您的姓", trigger: "blur" }],
        name: [{ required: true, message: "请输入您的名", trigger: "blur" }],
        email: [{ required: true, validator: checkEmail, trigger: "blur" }],
        telephone: [
          { required: true, validator: checkMobile, trigger: "blur" },
          {
            min: 10,
            max: 15,
            message: "长度在 10 到 15 个字符",
            trigger: "blur",
          },
        ],
        verificationCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
      // 下拉列表的数据
      optionsRole: [
        {
          value: "1",
          label: "PI",
        },
        {
          value: "2",
          label: "CRC",
        },
        {
          value: "3",
          label: "CRA",
        },
        {
          value: "4",
          label: "DM",
        },
        {
          value: "5",
          label: "SUB-I",
        },
        {
          value: "6",
          label: "VIEWER",
        },
      ],
      optionsSite: [
        {
          value: "1",
          label: "中日友好",
        },
        {
          value: "2",
          label: "安贞",
        },
        {
          value: "3",
          label: "阜外",
        },
        {
          value: "4",
          label: "协和",
        },
        {
          value: "5",
          label: "ALL",
        },
      ],
      optionsPrefix: [
        {
          value: "1",
          label: "Dr.",
        },
        {
          value: "2",
          label: "Mr.",
        },
        {
          value: "3",
          label: "Ms.",
        },
      ],
      // 双向绑定的数据
      role: "",
      site: "",
      prefix: "",
      accountStatus: "冻结",
    };
  },
  methods: {
    // 注册校验规则
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.$message.success("注册成功!");
          this.$router.push("/login");
        } else {
          this.$message.error("注册失败!");
          return false;
        }
      });
    },
    // 重置表单项
    resetForm(formName) {
      this.$refs[formName].resetFields();
        this.$message('重置表单成功！');
    },
    // 返回
    back() {
      this.$router.push("./");
    },
  },
};
</script>

<style scoped>
.el-form {
  width: 697px;
  height: 100%;
  border: 1px solid #6495ed;
  margin: auto;
  border-radius: 5%;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  font-size: 25px;
  font-weight: 700;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

.el-alert {
  padding: 0;
  padding-left: 20px;
}

.vericode_btn {
  margin-top: 32px !important;
}
</style>

<style>
.el-form-item__label {
  padding: 0 !important;
}
.el-button--primary {
  margin-top: 32px !important;
}
.el-alert .el-alert__description {
  font-size: 16px !important;
}
.el-button--primary {
  margin: 0 !important;
}
</style>
